<template>
<Split @onDrag="handleChange" style="height: 100%; min-width: 200px">
    <SplitArea :size="70">
        <basic-container>
            <div id="cn_map" :style="chartStyle"></div>
        </basic-container>
    </SplitArea>
    <SplitArea :size="30">
        <el-row>
            <basic-container>
                <div>
                    <span>产品名称</span>
                    <el-divider direction="vertical" />
                    <span>
                        <el-tag @click="$router.push('/desk/student')">xxx xxx系统</el-tag>
                    </span>
                    <el-divider content-position="right"><i class="el-icon-star-off" /></el-divider>
                    <span>当前用户</span>
                    <el-divider direction="vertical" />
                    <el-tag effect="plain" @click="$XModal.message({ message: '消息提示' })">{{ userInfo.userName +'('+userInfo.account }})</el-tag>
                    <el-divider content-position="right"><i class="el-icon-star-off" /></el-divider>
                    <span>对话框示例</span>
                    <el-divider direction="vertical" />
                    <vxe-button @click="value7 = true" size="mini">可拖动窗口</vxe-button>
                    <el-divider content-position="right"><i class="el-icon-star-off" /></el-divider>
                    <span>官网地址</span>
                    <el-divider direction="vertical" />
                    <span>
                        <el-link href="https://www.sunvua.com" target="_blank" type="primary">https://www.sunvua.com</el-link>
                    </span>
                    <el-divider content-position="right"><i class="el-icon-star-off" /></el-divider>
                    <span>使用文档</span>
                    <el-divider direction="vertical" />
                    <span class="tag-group">
                        <el-tag type="success" style="cursor: pointer" onclick="window.open('https://www.sunvua.com/note/view/1.html')">使用说明</el-tag>
                        <el-divider direction="vertical" />
                        <el-tag type="danger" style="cursor: pointer" onclick="window.open('https://www.sunvua.com')">常见问题</el-tag>
                    </span>
                </div>
            </basic-container>
        </el-row>
        <el-row>
            <basic-container>
                <el-collapse v-model="logActiveNames" @change="handleChange">
                    <el-collapse-item title="使用流程" name="27">
                        <div>1.创建xx，录入xxx</div>
                        <div>2.进行xxxxxxxxxxx测试</div>
                        <div>3.查看xxxxxxxxxx报告</div>
                        <div>4.xxxxxxxxxxxx</div>
                        <div>5.生成xxxxxxxxxxxxxxxxxxxx</div>

                    </el-collapse-item>
                    <el-collapse-item title="树样式示例" name="26">
                        <div class="mytree" style="height:180px;">
                            <el-tree indent="3" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">
                            </el-tree>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </basic-container>
        </el-row>
        <vxe-modal v-model="value7" title="vxe-modal功能强太的对话框" show-zoom resize>
            <template v-slot>
                <div style="color: red">按住头部移动！！！！！！！！！！！！！！！</div>
                <div style="color: blue">按住左边距拖动！！！！！！！！！！！！！！！</div>
                <div style="color: red">按住右边距拖动！！！！！！！！！！！！！！！</div>
                <div style="color: blue">按住底边距拖动！！！！！！！！！！！！！！！</div>
                <div style="color: blue">按住左下角拖动 ！！！！！！！！！！！！！！！</div>
                <div style="color: blue">按住右下角拖动！！！！！！！！！！！！！！！</div>
                <el-button type="text" @click="centerDialogVisible = true">点击打开el-Dialog能拖动的对话框</el-button>
                <el-button type="text" @click="handleMyDialog">点击打开基于el-dialog封装可拖动可全屏的对话框</el-button>
            </template>
        </vxe-modal>
        <el-dialog v-dialogdrag class="avue-dialog avue-dialog--top"
          title="提示:只能拖动不全屏"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
          <span>需要注意的是内容是默认不居中的</span><br>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false" size="mini">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible = false" size="mini">确 定</el-button>
          </span>
        </el-dialog>
    </SplitArea>
</Split>
</template>

<script>
import {
    mapGetters
} from "vuex";
import echarts from 'echarts';
import XEUtils from 'xe-utils';
import Dashboard from './dashboard.vue'

export default {
    name: "wel",
    data() {
        return {
            activeNames: ['1', '2', '3', '5'],
            logActiveNames: ['27', '26'],
            chartStyle: {},
            myChart: null,
            value7: false,
            centerDialogVisible: false,
            data: [{
                id: 1,
                label: '一级 2',
                children: [{
                    id: 3,
                    label: '二级 2-1',
                    children: [{
                        id: 4,
                        label: '三级 3-1-1'
                    }, {
                        id: 5,
                        label: '三级 3-1-2',
                        disabled: true
                    }]
                }, {
                    id: 2,
                    label: '二级 2-2',
                    disabled: true,
                    children: [{
                        id: 6,
                        label: '三级 3-2-1'
                    }, {
                        id: 7,
                        label: '三级 3-2-2',
                        disabled: true
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        };
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    created() {},

    mounted() {
        this.chartStyle = {
            height: window.innerHeight - 140 + 'px', //'border-right': '1px solid #bbbfc2'
        }

        var resizeHandler = XEUtils.debounce(() => {
            var cm = document.getElementById('cn_map');
            if (cm) {
                cm.style.height = window.innerHeight - 140 + 'px';
                this.myChart.resize();
            }
        }, 100)
        window.addEventListener('resize', resizeHandler)

        this.$nextTick(() => this.drawChart())

    },
    methods: {
        handleMyDialog(){
            this.$dialog(
                {
                    title: '标题',
                    content: <Dashboard />,
                    class:"mydialog",
                    buttons: [
                    {
                        label: '取消',
                        type: 'primary',
                        onClick: ({ vm }) => {
                            vm.hide()
                        },
                    },
                    {
                        label: '确定',
                        type: 'primary',
                        onClick: ({ vm, component }) => {
                            component.submit()
                            vm.hide()
                        },
                    },
                    ],
                }
            )
        },
        handleChange(val) {
            console.log(val);
        },
        drawChart() {
            var dataList = [{
                name: '北京',
                value: 100
            }, {
                name: '天津',
                value: 200
            }, {
                name: '上海',
                value: 300
            }];
            this.myChart = echarts.init(document.getElementById('cn_map'));

            var option = {
                title: {
                    text: '分省本科高校数量统计'
                },
                tooltip: {
                    formatter: function (params, ticket /* , callback */ ) {
                        return params.seriesName + '<br />' + params.name + '：' + params.value
                    } //数据格式化
                },
                visualMap: {
                    min: 1,
                    max: 100,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], //取值范围的文字
                    inRange: {
                        color: ['#e0ffff', '#006edd'] //取值范围的颜色
                    },
                    show: true //图注
                },
                geo: {
                    map: 'china',
                    roam: false, //不开启缩放和平移
                    zoom: 1.23, //视角缩放比例
                    label: {
                        normal: {
                            show: true,
                            fontSize: '10',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        emphasis: {
                            areaColor: '#F3B329', //鼠标选择区域颜色
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowBlur: 20,
                            borderWidth: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
                series: [{
                    name: '院校数量',
                    type: 'map',
                    geoIndex: 0,
                    data: dataList
                }]
            };
            this.myChart.setOption(option);
            this.myChart.on('click', function ( /* params */ ) {
                //alert(params.name);
            });
        }
    },
};
</script>

<style>
.el-divider--horizontal {
    margin: 12px 0 !important;
}
</style>
<style lang="scss" scoped>
::v-deep .mytree {
    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
    .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .el-tree-node__children {
        padding-left: 16px;
    }

    .el-tree-node :last-child:before {
        height: 38px;
    }

    .el-tree>.el-tree-node:before {
        border-left: none;
    }

    .el-tree>.el-tree-node:after {
        border-top: none;
    }

    .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .el-tree-node:before {
        border-left: 1px solid #bbbfc2;
        bottom: 0px;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .el-tree-node:after {
        border-top: 1px solid #bbbfc2;
        height: 20px;
        top: 12px;
        width: 24px;
    }

    .el-tree .el-tree-node__expand-icon.expanded {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .el-tree .el-icon-caret-right:before {
        content: "\e783";
        font-size: 18px;
        color: #8EA3B8;
    }

    .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
        content: "\e781";
        font-size: 18px;
        color: #8EA3B8;
    }

    .el-tree-node__content>.el-tree-node__expand-icon {
        padding: 2px;
    }
}
</style>
